<template>
  <div id="staffManagement_idShop">
    <c-title :hide="false" text="员工管理"></c-title>
    <div class="txt">员工人数：{{ staff_num }}</div>
    <div class="listBox" v-if="list.length > 0">
      <div class="lis" v-for="(item, index) in list" :key="index">
        <div class="lis_l">
          <div class="name">姓名：{{ item.name }}</div>
          <div class="mobile">手机号：{{ item.tel }}</div>
        </div>
        <div class="lis_r" @click="delMthod">删除</div>
      </div>
    </div>
    <van-empty image="search" description="暂无更多" v-else />
    <div class="addStaff">
      <div class="btn" @click="addStaffOpen">新增员工</div>
    </div>
    <van-popup v-model="addStaff" position="bottom" round :style="{ height: '20.44rem' }">
      <van-nav-bar title="新增员工" @click-left="onClickLeft" @click-right="onClickRight">
        <template #left>
          <span class="cancelTxt">取消</span>
        </template>
        <template #right>
          <span>确定</span>
        </template>
      </van-nav-bar>
      <div class="changeManagerBox">
        <div class="cellbox">
          <div class="title">姓名</div>
          <input type="text" class="inpc" placeholder="请输入" v-model="staffNmae" />
        </div>
        <div class="cellbox">
          <div class="title">手机号</div>
          <input type="text" class="inpc" placeholder="请输入" v-model="staffPhone" />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      addStaff: false,
      staffPhone: "",
      staffNmae: "",
      list: [],
      staff_num: 0,
      page: 1,
      total_page: 0,
      isLoadMore: false
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    addStaffOpen() {
      this.addStaff = true;
      this.staffPhone = "";
      this.staffNmae = "";
    },
    onClickLeft() {
      this.addStaff = false;
      this.staffPhone = "";
      this.staffNmae = "";
    },
    async delMthod() {
      let { data, result, msg } = await $http.post("plugin.project-party.frontend.controllers.index.delStaff", { tel: this.staffPhone });
      if (result) {
        this.$toast(msg);
        this.onClickLeft();
        this.getData();
      } else {
        this.$toast(msg);
      }
    },
    async onClickRight() {
      this.addStaff = false;
      let { data, result, msg } = await $http.post("plugin.project-party.frontend.controllers.index.addStaff", { tel: this.staffPhone, name: this.staffNmae });
      if (result) {
        this.$toast(msg);
        this.getData();
      } else {
        this.$toast(msg);
      }
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = false;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.index.staffList", {}, "");
      if (result) {
        this.list = data.data;
        this.staff_num = data.staff_num;
      } else {
        this.$toast(msg);
      }
    }
    // //获取更多数据
    // getMoreData() {
    //   this.isLoadMore = false; // 防止多次请求分页数据
    //   if (this.page >= this.total_page) {
    //     return;
    //   } else {
    //     this.page = this.page + 1;
    //     $http
    //       .get(
    //         "plugin.project-party.frontend.controllers.index.staffList",
    //         {
    //           page: this.page
    //         },
    //         "加载中"
    //       )
    //       .then(
    //         response => {
    //           this.isLoadMore = true;
    //           if (response.result === 1) {
    //             let myData = response.data.data;
    //             this.list = this.list.concat(myData); //数组拼接
    //           } else {
    //             this.page = this.page - 1;
    //             this.isLoadMore = false;
    //           }
    //         },
    //         response => {
    //           // error callback
    //         }
    //       )
    //       .catch(err => {
    //         console.error(err);
    //       });
    //   }
    // }
  }
};
</script>
<style lang="scss" scoped>
#staffManagement_idShop {
  overflow: hidden;
  .addStaff {
    position: fixed;
    bottom: 1.56rem;
    left: 0;
    width: 100%;
    .btn {
      margin: 0 0.75rem;
      background: #f15353;
      border-radius: 1.25rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #fff;
      font-size: 0.94rem;
      font-weight: 500;
    }
  }
  .txt {
    margin: 1.13rem 0.75rem 0 0.75rem;
    font-size: 0.94rem;
    font-weight: bold;
    text-align: left;
  }
  .listBox {
    margin: 0.94rem 0.75rem 0 0.75rem;
    overflow: hidden;
    padding-bottom: 5rem;
    .lis {
      padding: 1rem 0.75rem;
      box-sizing: border-box;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      margin-bottom: 0.63rem;
      .lis_l {
        flex: 1;
        text-align: left;
        font-size: 0.81rem;
        .name {
          margin-bottom: 0.63rem;
        }
      }
      .lis_r {
        flex-shrink: 0;
        width: 3.75rem;
        height: 1.75rem;
        border-radius: 1.5rem;
        border: 0.03rem solid #f15353;
        font-size: 0.81rem;
        font-weight: 500;
        color: #f15353;
        line-height: 1.75rem;
        text-align: center;
      }
    }
  }
  .cancelTxt {
    color: #aaaab3;
  }
  .changeManagerBox {
    .cellbox {
      margin: 0 0.94rem;
      margin-top: 1.59rem;
      display: flex;
      flex-direction: column;
      .title {
        text-align: left;
        font-size: 0.88rem;
        font-weight: 500;
        margin-bottom: 0.69rem;
      }
      .inpc {
        border: 1px solid #d6d6dc;
        border-radius: 0.5rem;
        height: 3rem;
        text-indent: 0.69rem;
      }
    }
  }
}
</style>
